<template>
    <div class="view">
        <div class="container">
            <!-- 标题栏 -->
          <div class="title">
            <h2>院校历史情况</h2>
            <!-- 添加按钮 -->
            <el-button size="mini" icon="el-icon-plus" @click="AddDialogVisible = true">添加</el-button>
          </div>

          <el-table
                :data="values"
                style="width: 100%"
                fit
                >
                <el-table-column
                    prop="schoolId"
                    label="学校编号"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="schoolName"
                    label="学校名称"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="majorName"
                    label="专业名称"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="type"
                    label="历史类型"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="val"
                    label="数值"
                    align="center"
                ></el-table-column>
                <el-table-column
                label="操作"
                align="center"
                width="180"
                >
                <template slot-scope="scope">
                    <el-button type="" size="mini" icon="el-icon-edit"
                    @click="edit(scope.row)">编辑</el-button>
                    <el-button type="warning" size="mini" icon="el-icon-delete" @click="deletePlan(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
        <!-- 添加标签弹出框 -->
        <el-dialog
            title="添加"
            :visible.sync="AddDialogVisible"
            width="30%"
            >
            <el-form ref="form" :model="value" label-width="80px" prop="form">
                <el-form-item label="学校名称">
                    <el-select v-model="value.schoolId" placeholder="请选择">
                        <el-option
                            v-for="item in value_schools"
                            :key="item.schoolId"
                            :label="item.schoolName"
                            :value="item.schoolId"
                        ></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="专业">
                    <el-select v-model="value.majorId" placeholder="请选择">
                        <el-option
                            v-for="item in majors"
                            :key="item.majorId"
                            :label="item.majorName"
                            :value="item.majorId"
                        ></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="历史类型">
                    <el-select v-model="value.type" placeholder="请选择">
                        <el-option
                            v-for="item in typeList"
                            :key="item"
                            :label="item"
                            :value="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                              <el-form-item label="数值">
                                  <el-input v-model="value.val"></el-input>
                              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改标签弹出框 -->
        <el-dialog
            title="修改标签"
            :visible.sync="EditDialogVisible"
            width="30%"
            >
          <el-form ref="form" :model="value" label-width="80px" prop="form">
            <el-form-item label="学校名称">
              <el-select v-model="value.schoolId" placeholder="请选择">
                <el-option
                  v-for="item in value_schools"
                  :key="item.schoolId"
                  :label="item.schoolName"
                  :value="item.schoolId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业">
              <el-select v-model="value.majorId" placeholder="请选择">
                <el-option
                  v-for="item in majors"
                  :key="item.majorId"
                  :label="item.majorName"
                  :value="item.majorId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="历史类型">
              <el-select v-model="value.type" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数值">
              <el-input v-model="value.val"></el-input>
            </el-form-item>
          </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="EditDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
// import { getapi,addapi,updateapi,deleteapi } from '@/api/comments'
import { getapi as getapi_schools } from '@/api/school'
import { getapi as getapi_history,addapi,updateapi,deleteapi } from '@/api/history'
import { getapi as getMajorsApi } from '@/api/majors'

export default {
    username: 'view',
    data() {
        return {
            value:{
                schoolId:'',
                majorId:'',
                type:'',
                val:''
            },
          typeList:["去年复试线","去年录取线","去年报录比","去年复录比","去年招生人数","考试科目","学费","招生简章网址"],
            values:[],
            value_schools:[],
            majors:[],
            AddDialogVisible: false,
            EditDialogVisible: false,
            current: 1,
            size: 10,
            total: 0
        }
    },
    methods: {
        get() {
          getapi_history(
                this.current,
                this.size
            ).then(res => {
                if (res.code === 20000) {
                    this.$message({
                        message: '获取成功',
                        type: 'success'
                    })
                }
                this.total = res.data.total;
                this.values = res.data.historys;
            })


          getapi_schools(
                1,
                100
            ).then(res => {
                this.value_schools = res.data.schools;
            })
          getMajorsApi(
                1,
                100
            ).then(res => {
                this.majors = res.data.majors;
            })

        },
        handleCurrentChange(val) {
            this.current = val;
            this.get();
        },
        add() {
            addapi(this.value).then(res => {
                if (res.code === 20000) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                }
                this.get();
                this.AddDialogVisible = false;
                // 清空表单
                this.$refs.form.resetFields();
              this.value.majorId = '';
              this.value.type = '';
              this.value.val = '';
              this.value.schoolId = '';
            })
        },
        delete(id,majorId) {
            deleteapi(id,majorId).then(res => {
                this.get();
            })
        },
        edit(row) {
            this.value = JSON.parse(JSON.stringify(row));
            this.EditDialogVisible = true;
        },
        update() {
            updateapi({
                schoolId: this.value.schoolId,
                majorId: this.value.majorId,
                type: this.value.type,
                val: this.value.val
            }).then(res => {
                if (res.code === 20000) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                }
                this.get();
                this.EditDialogVisible = false;
                this.value.majorId = '';
                this.value.type = '';
                this.value.val = '';
                this.value.schoolId = '';
            })
        },
        deletePlan(row) {
            this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delete(row.schoolId,row.majorId);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        filterStatus(value, row) {
            return row.status === value;
        }
    },
    mounted() {
        this.handleCurrentChange(this.current);
    },
}
</script>

<style scoped>
.view {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
  padding-left: 80px;
  padding-right: 80px;
}


h2 {
  font-size: 25px;
  font-weight: 900;
  color: #397ddc;
  margin-bottom: 20px;
}

.container {
  margin-top: 40px;
}

.container .color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
}

.container span {
  color: #ccc;
  font-size: 12px;
}

/* title */
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* block */
.block {
  position: fixed;
  bottom: 20px;
}


</style>
